// pages/songDetail/songDetail.js
import {
  API_SongDetail,
  API_SongURL
} from '../../../api/api_songDetail'

import PubSub from 'pubsub-js';
import moment from 'moment'

// 获取全局的实例 这里主要是为了返回页面后再次进入该页面能与全局的播放状态保持一致
// 否则每次返回后该页面注销，进来都是没有播放的状态
const appInstance = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false,
    songId: '',
    songsDetail: [],
    musicUrl: '',
    currentTime: '00:00', //实时时长
    durationTime: '00:00', //总时长
    currentWidth: 0
  },
  // 点击切换暂停和播放
  handleMusicPlay() {
    // this.setData({
    //   isPlay: !this.data.isPlay
    // })
    // 控制播放
    this.musciConteol(!this.data.isPlay, this.data.songId, this.data.musicUrl)
  },
  // 控制音乐播放
  async musciConteol(isPlay, musicId, musicUrl) {
    if (isPlay) {
      // 获取歌曲的播放地址
      if (!musicUrl) {
        const res = await API_SongURL({
          id: musicId
        })
        musicUrl = res.data[0].url
        this.setData({
          musicUrl
        })
      }



      this.backgroundAudioManager.src = musicUrl;
      this.backgroundAudioManager.title = this.data.songsDetail.name
      this.backgroundAudioManager.play();
    } else {
      this.backgroundAudioManager.pause();
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      songId: options.songId
    })
    this.getSongDetail(this.data.songId)

    // 判断当前这首歌是否在播放
    if (appInstance.globalData.isMusciPlay && appInstance.globalData.musicId === this.data.songId)
      this.setData({
        isPlay: true,
      })
    /** 监听当前音乐的播放状态
     * 
     * 
     * 问题：当前我们在该页面切换播放和暂停的情况很正常，但是当我们使用系统自带的控制器
     * 来暂停或播放音乐使该页面动画不正常，因此需要监听音乐的状态
     * 解决：
     * 1. 控制音频的实例BackgroundAudioManager 来监听音乐的播放和暂停
     */
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    this.backgroundAudioManager.onPause(() => {
      this.setData({
        isPlay: false,
      })
      appInstance.globalData.isMusciPlay = false;
    })
    this.backgroundAudioManager.onPlay(() => {
      this.setData({
        isPlay: true,
      })
      // 修改全局的音乐播放状态
      appInstance.globalData.isMusciPlay = true;
      appInstance.globalData.musicId = this.data.songId;
    })
    this.backgroundAudioManager.onStop(() => {
      this.setData({
        isPlay: false,
      })
      appInstance.globalData.isMusciPlay = false;
    })
    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss')
      let currentWidth = this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration * 450
      if (appInstance.globalData.isMusciPlay && appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          currentTime,
          currentWidth
        })
      }
    })
    // 监听音乐播放自然结束
    this.backgroundAudioManager.onEnded(() => {
      this.endNext()
    })
  },
  // 根据歌曲id获取歌曲的详情数据
  async getSongDetail(id) {
    const res = await API_SongDetail({
      ids: id
    })
    // 使用moment插件来转换时间
    let durationTime = moment(res.songs[0].dt).format('mm:ss');
    this.setData({
      songsDetail: res.songs[0],
      durationTime,
    })
    wx.setNavigationBarTitle({
      title: this.data.songsDetail.name
    })
  },
  // 切换上一首、下一首
  handleSwitch(event) {
    /**
     * 将当前的切换信息发个recommendSong页面，其判断是上一首还是下一首，
     * 然后将相对应的，musicId发送过来，再到该页面获取该歌曲的数据
     */
    let type = event.currentTarget.id; //上一首还是下一首
    this.backgroundAudioManager.stop();
    // 发布消息给recommendSong
    PubSub.publish('switchMusci', type)

    // 订阅来自recommendSong的消息
    PubSub.subscribe('musicId', (msg, musciId) => {
      // 获取切换歌曲的数据
      this.setData({
        songId: musciId
      })
      this.getSongDetail(musciId)
      this.musciConteol(true, musciId)
      // 取消当次的订阅,不然这个订阅一直存在，会干扰后面的切换
      PubSub.unsubscribe('musicId')
    })
  },
  // 自然播放结束后切换到下一曲
  endNext() {
    this.backgroundAudioManager.stop();
    // 发布消息给recommendSong
    PubSub.publish('switchMusci', 'next')

    // 订阅来自recommendSong的消息
    PubSub.subscribe('musicId', (msg, musciId) => {
      // 获取切换歌曲的数据
      this.setData({
        songId: musciId
      })
      this.getSongDetail(musciId)
      this.musciConteol(true, musciId)
      // 取消当次的订阅,不然这个订阅一直存在，会干扰后面的切换
      PubSub.unsubscribe('musicId')
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})